<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="行政区划名称">
        <el-input
          v-model="searchKey.label"
          placeholder="请输入行政区划名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="行政区划编码">
        <el-input
          v-model="searchKey.code"
          placeholder="请输入行政区划编码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="上级行政区划">
        <tree-select v-model="searchKey.pid" :options="areaOptions" :normalizer="treeSelectProps" style="width:200px"
                     placeholder="选择上级行政区划"/>
      </el-form-item>

      <el-form-item>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button>
        <el-button
          class="filter-item"
          type="success"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:area:add']"
        >新增
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="areaList"

      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="label" align="center" label="行政区划名称"></el-table-column>
      <el-table-column prop="code" align="center" label="区域编码"></el-table-column>
      <el-table-column prop="plabel" align="center" label="隶属于行政区划"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="level" width="60">
        <template slot="header" align="center" slot-scope="{}">
          <p style="margin: 0;">级别</p>
        </template>
        <template slot-scope="scope">
          <div>{{scope.row.level | levelFilter }}</div>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:area:edit']"
          >修改
          </el-button>
          <!--<el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAdd(scope.row)"
            v-hasPermi="['system:area:add']"
          >新增
          </el-button>-->
          <el-button
            v-if="scope.row.pid != 0"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:area:edit']"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row,1)"
            v-hasPermi="['system:area:edit']"
          >比例变更
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="searchKey.pageNum" :page-sizes="[10, 20, 50, 100, 200]"
                     :page-size="searchKey.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>

    <!-- 添加或修改行政区划对话框  -->
    <el-dialog :title="title" :visible.sync="open" width="900px">
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">


        <el-row>
          <el-col :span="12" v-if="form.pid !== 0 && isEdit">
            <el-form-item label="上级行政区划" prop="pid">
              <!--<treeselect v-model="form.pid" :options="areaOptions" placeholder="选择上级行政区划"/>-->
              <tree-select v-model="form.pid" :options="areaOptions" :loadOptions="{}" :normalizer="treeSelectProps"
                           placeholder="置空默认为省级" @select="handleNodeClick"/>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="form.pid !== 0  && isEdit">
            <el-form-item label="级别" prop="level">
              <el-select size="small" v-model="form.level" placeholder="请选择" style="width: 100px;">
                <el-option label="请选择" value=""></el-option>
                <el-option label="省" :value="1"></el-option>
                <el-option label="市" :value="2"></el-option>
                <el-option label="区" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>


        </el-row>

        <el-row v-if="isEdit || isEdit2">
          <el-col :span="12">
            <el-form-item label="行政区划编码" prop="code">
              <el-input v-model="form.code" placeholder="请输入行政区划编码" :disabled="isEdit2 && !isAdd"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行政区划名称" prop="label">
              <el-input v-model="form.label" placeholder="请输入行政区划名称" :disabled="isEdit2 && !isAdd"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isEdit2 && !isAdd">
            <el-form-item label="下级批量变更" prop="subid">
              <tree-select v-model="form.socialInsurancePlacePatch" :options="subTree" multiple
                           :normalizer="treeSelectProps"
                           placeholder=""/>
            </el-form-item>
            
          </el-col>
          <el-col :span="12" v-if="isEdit2">
            <el-form-item label="小数位保留方式" prop="calculationMethod" >
              <el-select size="small" v-model="form.calculationMethod" placeholder="请选择" style="width: 250px;">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="(item, index) in socialSecurityAccuracyListData"
                         :key="`socialSecurityAccuracy${index}`"
                         :label="item.dictLabel"
                         :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isEdit2">
          <el-col :span="12" v-if="form.pid !== 0">
            <el-form-item label="企业-养老保险比例" prop="epension">
              <el-input v-model="form.epension" placeholder="请输入企业-养老保险比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.pid !== 0">
            <el-form-item label="个人-养老保险比例" prop="ppension">
              <el-input v-model="form.ppension" placeholder="请输入个人-养老保险比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row v-if="isEdit2">
          <el-col :span="12" v-if="form.pid !== 0">
            <el-form-item label="企业-失业保险比例" prop="eloseJob">
              <el-input v-model="form.eloseJob" placeholder="请输入企业-失业保险比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.pid !== 0">
            <el-form-item label="个人-失业保险比例" prop="ploseJob">
              <el-input v-model="form.ploseJob" placeholder="请输入个人-失业保险比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>


        </el-row>

        <el-row v-if="isEdit2">
          <el-col :span="12" v-if="form.pid !== 0">
            <el-form-item label="企业-生育保险比例" prop="ebirth">
              <el-input v-model="form.ebirth" placeholder="请输入企业-生育保险比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.pid !== 0">
            <el-form-item label="个人-生育保险比例" prop="pbirth">
              <el-input v-model="form.pbirth" placeholder="请输入个人-生育保险比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isEdit2">
          <el-col :span="12">
            <el-form-item label="企业-医疗保险比例" prop="emedical">
              <el-input v-model="form.emedical" placeholder="请输入企业-医疗保险比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人-医疗保险比例" prop="pmedical">
              <el-input v-model="form.pmedical" placeholder="请输入个人-医疗保险比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isEdit2">
          <el-col :span="12">
            <el-form-item label="企业-工伤保险比例" prop="einjury">
              <el-input v-model="form.einjury" placeholder="请输入企业-工伤保险比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人-工伤保险比例" prop="pinjury">
              <el-input v-model="form.pinjury" placeholder="请输入个人-工伤保险比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isEdit2">

          <el-col :span="12">
            <el-form-item label="企业-住房公积金比例" prop="ehousing">
              <el-input v-model="form.ehousing" placeholder="请输入企业-住房公积金比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人-住房公积金比例" prop="phousing">
              <el-input v-model="form.phousing" placeholder="请输入个人-住房公积金比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row v-if="isEdit2">

          <el-col :span="12">
            <el-form-item label="企业-大病医疗比例" prop="edisease">
              <el-input v-model="form.edisease" placeholder="请输入企业-大病医疗比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人-大病医疗比例" prop="pdisease">
              <el-input v-model="form.pdisease" placeholder="请输入个人-大病医疗比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

         <el-row v-if="isEdit2">

          <el-col :span="12">
            <el-form-item label="企业-残疾人保障金比例" prop="edeformity">
              <el-input v-model="form.edeformity" placeholder="请输入企业-残疾人保障金比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人-残疾人保障金比例" prop="pdeformity">
              <el-input v-model="form.pdeformity" placeholder="请输入个人-残疾人保障金比例">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="isEdit2" type="success" @click="whoChanged">查看变更人员</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="'变更员工查询'" :visible.sync="open2" width="1200px">

      <el-form
        :inline="true"
        :model="searchKey2"
        :show-message="false"
        :inline-message="true"
        label-position="left"
        label-width="60px">
        <el-form-item label="姓名" prop="name" label-width="50px">
          <el-input size="small" v-model="searchKey2.name" placeholder="请输入姓名"
                    style="width: 120px;"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" label-width="50px">
          <el-select size="small" v-model="searchKey2.status" placeholder="请选择" style="width: 100px;">
            <el-option label="请选择" value=""></el-option>
            <el-option label="在职" :value="0"></el-option>
            <el-option label="待离职" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门" prop="deptId">
          <tree-select v-model="searchKey2.deptId" :options="departmentAllListData" :normalizer="treeSelectProps"
                       placeholder="选择部门"
                       style="width: 178px"/>
        </el-form-item>


        <!-- <el-form-item label="职务" prop="postIds" label-width="50px">
           <el-select v-model="searchKey.postIds" multiple placeholder="请选择职务" collapse-tags
                      style="width: 170px">
             <el-option label="请选择职务" value=""></el-option>
             <el-option v-for="(item, index) in jobAllListData" :key="`${item.postName}${index}`"
                        :label="item.postName"
                        :value="item.postId"></el-option>
           </el-select>
         </el-form-item>-->
        <!-- <el-form-item label="是否缴纳商业险" prop="payBusinessInsurance" label-width="120px">
           <el-select size="small" v-model="searchKey2.payBusinessInsurance" placeholder="请选择" style="width: 100px;">
             <el-option label="请选择" value=""></el-option>
             <el-option label="未缴纳" value="0"></el-option>
             <el-option label="缴纳" value="1"></el-option>
           </el-select>
         </el-form-item>-->
        <!--<el-form-item label="工资范围" prop="salaryRange" label-width="70px">
          <el-select v-model="searchKey2.salaryRange" clearable placeholder="请选择区间" style="width: 130px;">
            <el-option
              v-for="item in baseSalaryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职日期" prop="entrySelectedDate" label-width="70px">
          <el-date-picker
            size="small"
            v-model="searchKey2.entrySelectedDate"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            style="width: 250px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="离职日期" prop="dimissionSelectedDate" label-width="70px">
          <el-date-picker
            size="small"
            v-model="searchKey2.dimissionSelectedDate"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            style="width: 250px;">
          </el-date-picker>
        </el-form-item>-->
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="getList2">查询</el-button>
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['hr:employee:export']"
          >导出
          </el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8" style="float:left; width: 100%;">
        <el-col :span="1.5">

        </el-col>
      </el-row>


      <template>
        <el-table
          class="list-table"
          :data="listData2"
          stripe
          size="small"
          fit
          highlight-current-row
          style="width: 100%;">
          <el-table-column type="selection" align="center" width="55"/>

          <el-table-column :show-overflow-tooltip="true" prop="name" width="120">
            <template slot="header" slot-scope="{}">
              <p style="margin: 0;">姓名</p>
            </template>
            <template slot-scope="scope">
              <div v-text="scope.row.name"></div>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="certNo" width="160">
            <template slot="header" slot-scope="{}">
              <p style="margin: 0;">身份证</p>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="phone" width="120">
            <template slot="header" slot-scope="{}">
              <p style="margin: 0;">手机号</p>
            </template>
          </el-table-column>

          <el-table-column :show-overflow-tooltip="true" prop="socialInsurancePlaceName" width="120">
            <template slot="header" slot-scope="{}">
              <p style="margin: 0;">社保缴纳地</p>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="status">
            <template slot="header" slot-scope="{}">
              <p style="margin: 0;">状态</p>
            </template>
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | employeeStatus" size="small">{{scope.row.status |
                employeeStatus('text')}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="deptId" width="110">
            <template slot="header" slot-scope="{}">
              <p style="margin: 0;">所属部门</p>
            </template>
            <template slot-scope="scope">
              <span>{{`${scope.row.deptName}`}}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="deptId" width="110">
            <template slot="header" slot-scope="{}">
              <p style="margin: 0;">职务</p>
            </template>
            <template slot-scope="scope">
              <span>{{`${scope.row.postName}`}}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="bankNo" width="160">
            <template slot="header" slot-scope="{}">
              <p style="margin: 0;">银行卡</p>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="openingBank" width="160">
            <template slot="header" slot-scope="{}">
              <p style="margin: 0;">开户行</p>
            </template>
          </el-table-column>

        </el-table>
      </template>

      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                       :current-page="searchKey2.pageNum" :page-sizes="[10, 20, 50, 100, 200]"
                       :page-size="searchKey2.pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="totalCount2">
        </el-pagination>
      </div>

    </el-dialog>


  </div>
</template>

<script>
  import {
    listArea,
    getArea,
    treeselect,
    delArea,
    addArea,
    updateArea,
    updateArea2,
    employeeList,
    exportEmployeeList
  } from '@/api/system/area'
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { debounce } from 'lodash'
  import commonMixins from '@/mixins/common'
  import treeAllListData from '@/mixins/treeAllListData'
  import tagFilter from '@/filters/tagFilter'

  export default {
    name: 'Area',
    mixins: [commonMixins, treeAllListData, tagFilter],
    components: {
      TreeSelect
    },
    data() {

      let isCurrency = /^(([1-9]\d*)|0)(\.\d{1,3})?$/
      return {
        subTree: [],
        treeLoaded: false,
        totalCount2: 0,
        listData2: [],
        totalCount: 0,
        isEdit: false,
        isEdit2: false,
        isAdd: false,
        treeSelectProps(node) {
          return {
            id: node.id,
            label: node.label,
            children: node.children,
            isDefaultExpanded: false
          }
        },
        plabel: '',
        // 遮罩层
        loading: false,
        // 表格树数据
        areaList: [],
        // 行政区划树选项
        areaOptions: [],

        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        open2: false,
        // 查询参数
        searchKey: {
          pageSize: 10,
          label: undefined

        },
        searchKey2: {
          pageSize: 10
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          /*pid: [
            { required: true, message: '上级行政区划不能为空', trigger: 'blur' }
          ], */
          calculationMethod : [
              { required: true, message: '小数位保留方式不能为空', trigger: 'blur' }
          ],
          level: [
            { required: true, message: '行政区划级别不能为空', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '编码不能为空', trigger: 'blur' }
          ],
          label: [
            { required: true, message: '行政区划名称不能为空', trigger: 'blur' }
          ],
          epension: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入企业-养老保险比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          emedical: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入企业-医疗保险比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          eloseJob: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入企业-失业保险比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          einjury: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入企业-工伤保险比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          ebirth: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入企业-生育保险比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          ehousing: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入企业-住房公积金比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          ppension: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入个人-养老保险比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          pmedical: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入个人-医疗保险比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          ploseJob: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入个人-失业保险比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          pinjury: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入个人-工伤保险比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          pbirth: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入个人-生育保险比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          ehousing: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入企业-住房公积金比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],
          phousing: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入个人-住房公积金比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],

          pdisease: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入个人-大病医疗比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],

          edisease: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入企业-大病医疗比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],

          pdeformity: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入个人-残疾人保障金比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],

          edeformity: [
            {
              required: true, trigger: 'blur', validator: (rule, value, callback) => {
                if (`${value}` === '') {
                  callback(new Error('请输入企业-残疾人保障金比例'))
                } else if (!isCurrency.test(`${value}`)) {
                  callback(new Error('请输入有效的比例(最多3位小数)'))
                } else {
                  callback()
                }
              }
            }
          ],


        }
      }
    },
    created() {
      this.initData()
      this.GetSocialSecurityAccuracyList()
    },

    filters: {
      levelFilter(val) {
        if (val == 1) {
          return '省'
        }
        if (val == 2) {
          return '市'
        }

        if (val == 3) {
          return '区'
        }
      }

      /*m100 (val){
        let rs = val;
        try{
          rs = val * 100;
        }catch(e){

        }
        return rs;
      },

      d100 (val){
        let rs = val;
        try{
          rs = val / 100;
        }catch(e){

        }
        return rs;
      }*/

    },

    watch: {
      'form.pid': {
        handler: function(val) {

        },
        immediate: true
      }
    },

    methods: {

      async initData() {
        await this.getDepartmentAllListData()
        this.getList()
        this.loading = true
        this.getTreeselect()
      },

      whoChanged() {
        this.open2 = true
        this.getList2()

      },

      handleNodeClick(node) {
        console.log(node)
        this.plabel = node.label
        console.log('plabel赋值', this.plabel)
      },

      /** 查询行政区划列表 */
      getList() {
        this.loading = true
        listArea(this.searchKey).then(response => {
          this.areaList = response.rows
          this.totalCount = response.total
          if (this.treeLoaded) this.loading = false
        })
      },

      //员工查询
      getList2() {
        if (!this.form.socialInsurancePlacePatch) this.form.socialInsurancePlacePatch = []
        let obj2 = { socialInsurancePlace: this.form.socialInsurancePlacePatch.join(',') + ',' + this.form.id }
        if (obj2.socialInsurancePlace.indexOf(',') == 0) obj2.socialInsurancePlace = obj2.socialInsurancePlace.replace(',', '')

        let obj = this.searchKey2
        let query = { ...obj, ...obj2 }

        employeeList(query).then(response => {
          this.listData2 = response.rows
          this.totalCount2 = response.total
          console.log(this.listData2)
          console.log(this.totalCount2)

        })
      },

      /** 查询行政区划下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          //加载完毕
          this.areaOptions = response.data
          // this.areaOptions.push({
          //   id: '0',
          //   label: '中国'
          // })
          this.loading = false
          this.treeLoaded = true
        })
      },

      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.plabel = ''
        this.form = {}
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList()
      },
      /** 新增按钮操作 */
      handleAdd(row) {

        this.reset()
        this.isEdit = true
        this.isEdit2 = true
        if (row != undefined) {
          this.form.pid = row.id
          this.isEdit2 = true
          this.isAdd = true
        }
        this.open = true
        this.title = '添加行政区划'

      },

      /** 修改按钮操作 */
      handleUpdate(row, bs) {
        this.isAdd = false
        if (!bs) {
          this.isEdit = true
          this.isEdit2 = false
        } else {
          //比例变更
          this.isEdit = false
          this.isEdit2 = true
        }

        let that = this
        getArea(row.id).then(response => {
          this.form = response.data

          //对百分比进行过滤
          this.form.ebirth = parseFloat(this.formatNumberTiny({
            formula: `${this.form.ebirth}*100`, format: '0.000'
          }))
          this.form.ehousing = parseFloat(this.formatNumberTiny({
            formula: `${this.form.ehousing}*100`, format: '0.000'
          }))
          this.form.einjury = parseFloat(this.formatNumberTiny({
            formula: `${this.form.einjury}*100`, format: '0.000'
          }))
          this.form.eloseJob = parseFloat(this.formatNumberTiny({
            formula: `${this.form.eloseJob}*100`, format: '0.000'
          }))
          this.form.emedical = parseFloat(this.formatNumberTiny({
            formula: `${this.form.emedical}*100`, format: '0.000'
          }))
          this.form.epension = parseFloat(this.formatNumberTiny({
            formula: `${this.form.epension}*100`, format: '0.000'
          }))
          this.form.pbirth = parseFloat(this.formatNumberTiny({
            formula: `${this.form.pbirth}*100`, format: '0.000'
          }))
          this.form.phousing = parseFloat(this.formatNumberTiny({
            formula: `${this.form.phousing}*100`, format: '0.000'
          }))
          this.form.pinjury = parseFloat(this.formatNumberTiny({
            formula: `${this.form.pinjury}*100`, format: '0.000'
          }))
          this.form.ploseJob = parseFloat(this.formatNumberTiny({
            formula: `${this.form.ploseJob}*100`, format: '0.000'
          }))
          this.form.pmedical = parseFloat(this.formatNumberTiny({
            formula: `${this.form.pmedical}*100`, format: '0.000'
          }))
          this.form.ppension = parseFloat(this.formatNumberTiny({
            formula: `${this.form.ppension}*100`, format: '0.000'
          }))


          this.form.edisease = parseFloat(this.formatNumberTiny({
            formula: `${this.form.edisease}*100`, format: '0.000'
          }))
          this.form.pdisease = parseFloat(this.formatNumberTiny({
            formula: `${this.form.pdisease}*100`, format: '0.000'
          }))
          this.form.edeformity = parseFloat(this.formatNumberTiny({
            formula: `${this.form.edeformity}*100`, format: '0.000'
          }))
          this.form.pdeformity = parseFloat(this.formatNumberTiny({
            formula: `${this.form.pdeformity}*100`, format: '0.000'
          }))

          this.open = true
          this.title = '修改行政区划'
          this.searchKey2 = {}
          //更新社保缴纳地查询条件
          this.searchKey2.socialInsurancePlace = this.form.id

          let areaOptions = this.areaOptions
          let targetEle = []

          function findArea(areaOptions, that) {
            areaOptions.forEach((v, i) => {
              if (v.id == that.form.id) {
                targetEle = v
                return
              }

              if (v.children) {
                findArea(v.children, that)
              }

            })

          }

          findArea(areaOptions, this)
          console.log(targetEle)

          this.subTree = targetEle.children

        })

        this.reset()

      },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {

          this.form.plabel = this.plabel
          let obj = this.form
          if (!this.form.socialInsurancePlacePatch) this.form.socialInsurancePlacePatch = []
          let obj2 = { socialInsurancePlace: this.form.socialInsurancePlacePatch.join(',') + ',' + this.form.id }
          if (obj2.socialInsurancePlace.indexOf(',') == 0) obj2.socialInsurancePlace = obj2.socialInsurancePlace.replace(',', '')
          let query = { ...obj, ...obj2 }

          //对百分比进行过滤
          query.ebirth = this.formatNumberTiny({
            formula: `${this.form.ebirth}/100`, format: '0.00000'
          })
          query.ehousing = this.formatNumberTiny({
            formula: `${this.form.ehousing}/100`, format: '0.00000'
          })
          query.einjury = this.formatNumberTiny({
            formula: `${this.form.einjury}/100`, format: '0.00000'
          })
          query.eloseJob = this.formatNumberTiny({
            formula: `${this.form.eloseJob}/100`, format: '0.00000'
          })
          query.emedical = this.formatNumberTiny({
            formula: `${this.form.emedical}/100`, format: '0.00000'
          })
          query.epension = this.formatNumberTiny({
            formula: `${this.form.epension}/100`, format: '0.00000'
          })
          query.pbirth = this.formatNumberTiny({
            formula: `${this.form.pbirth}/100`, format: '0.00000'
          })
          query.phousing = this.formatNumberTiny({
            formula: `${this.form.phousing}/100`, format: '0.00000'
          })
          query.pinjury = this.formatNumberTiny({
            formula: `${this.form.pinjury}/100`, format: '0.00000'
          })
          query.ploseJob = this.formatNumberTiny({
            formula: `${this.form.ploseJob}/100`, format: '0.00000'
          })
          query.pmedical = this.formatNumberTiny({
            formula: `${this.form.pmedical}/100`, format: '0.00000'
          })
          query.ppension = this.formatNumberTiny({
            formula: `${this.form.ppension}/100`, format: '0.00000'
          })


          query.edeformity = this.formatNumberTiny({
            formula: `${this.form.edeformity}/100`, format: '0.00000'
          })
          query.pdeformity = this.formatNumberTiny({
            formula: `${this.form.pdeformity}/100`, format: '0.00000'
          })
          query.edisease = this.formatNumberTiny({
            formula: `${this.form.edisease}/100`, format: '0.00000'
          })
          query.pdisease = this.formatNumberTiny({
            formula: `${this.form.pdisease}/100`, format: '0.00000'
          })

          if (valid) {
            if (!this.form.pid) {
              this.form.pid = '0'
            }
            if (this.form.id != undefined) {

              //看看是否是比例修改
              if (this.isEdit2) {

                //比例修改要设置同级
                query.id = query.socialInsurancePlace
                updateArea2(query).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess('修改成功，' + response.msg)
                    this.open = false
                    this.getList()
                  } else {
                    this.msgError(response.msg)
                  }
                })
                return
              }

              updateArea(query).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('修改成功')
                  this.open = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                }
              })
            } else {
              addArea(query).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('新增成功')
                  this.open = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                }
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('<font color=red>是否确认删除?</font>', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true
        }).then(function() {
          return delArea(row.id)
        }).then((response) => {
          if (response.code != 200) {
            this.msgError(response.msg)
            return
          }

          this.getList()
          this.msgSuccess('删除成功')
        }).catch(function() {
        })
      },

      //分页
      handleSizeChange(val) { // 分页改变每页条数
        this.searchKey.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) { // 分页切换分页
        this.searchKey.pageNum = val
        this.getList()
      },

      //分页
      handleSizeChange2(val) { // 分页改变每页条数
        this.searchKey2.pageSize = val
        this.getList2()
      },
      handleCurrentChange2(val) { // 分页切换分页
        this.searchKey2.pageNum = val
        this.getList2()
      },

      handleExport: debounce(function() { // 导出，防抖

        this.$confirm('是否确认导出所有数据?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          try {

            if (!this.form.socialInsurancePlacePatch) this.form.socialInsurancePlacePatch = []
            let obj2 = { socialInsurancePlace: this.form.socialInsurancePlacePatch.join(',') + ',' + this.form.id }
            if (obj2.socialInsurancePlace.indexOf(',') == 0) obj2.socialInsurancePlace = obj2.socialInsurancePlace.replace(',', '')

            let obj = this.searchKey2
            let query = { ...obj, ...obj2 }

            let response = await exportEmployeeList(query)
            this.downloadFile(response)
          } catch (error) {
            // console.log(error)
            this.$notify.error({
              title: '错误',
              message: error.message || '操作失败！'
            })
          }
        }).catch(() => {
        })

      }, 300)

    }
  }
</script>
